/** Add css rules here for your application. */
body {
  font-family:helvetica,arial,sans-serif;
  background-color: #102030;
  overflow: hidden;
}

a:link {
  color:#0000cc;
}
     
a:visited {
  color:#551a8b;
}

a:active {
  color:#ff0000;
}

button {
  display: block;
  position: absolute;
  font-size: 16pt;
  bottom: 0px;
}
button.next {
  left: 0px;
}
button.skip {
  left: 128px;
}
button.prev {
  left: 256px;
}

.widePanel {
  width: 100%;
  background-color: #506070;
}

img {
  margin-top: 20px;
}

.thumbnail {
  width:50px;
  height:38px;
  border:1px solid #aaaaaa;
  padding:0;
  margin:0;
  margin-top:4px;
  margin-left:3px;
  vertical-align:top;
  border: 1px solid blue;
}

.preview {
  vertical-align:top;
  color:white;
  font-size:8pt;
  width:130px;
  max-height:44px;
  overflow: hidden;
  padding:0;
  margin:0;
  border: 1px solid green;
}

.row {
  border: 2px solid red;
  background: #102030;
}

.active-row {
  border: 2px solid yellow;
}

.title {
 display: block;
 position: absolute;
 left: 50px;
 top: 80px;
 background: none;
}
.corner_se, .corner_ne, .corner_nw, .corner_sw, .edge_n, .edge_s, .edge_e, .edge_w {
 position: absolute;
}
.corner_se, .corner_ne, .corner_nw, .corner_sw {
 width: 5px;
 height: 5px;
}
.edge_w {
 width: 10px;
 top: 5px;
 bottom: 5px;
 border-left: 10px solid #ff4060;
 border-right: 10px solid #60ff40;
 margin-left: 10px;
}
.edge_e {
 left: 0px;
 right: 0px;
 top: 0px;
 bottom: 0px;
 background: black;
 opacity: 0.5;
}
.edge_n, .edge_s {
 height: 0px;
 left: 5px;
 right: 5px;
 background: none;
}
.corner_ne, .corner_nw, .edge_n { top: 0px; }
.corner_se, .corner_sw, .edge_s { bottom: 0px; }
.corner_nw, .corner_sw, .edge_w { left: 0px; }
.corner_ne, .corner_se, .edge_e { right: 0px; }

.title .label {
  display: block;
  position: relative;
  border-left: 10px solid #4060ff;
  margin-left: 50px;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 5px;
  margin-top: 5px;
  color: white;
  font-size: 48px;
  font-weight: bold;
}

.player {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
}

.static {
  background-image: url(static.png); 
  background-repeat: repeat;
}

.hint {
 display: none;  /* set to block to display the key hint */
 position: absolute;
 right: 5px;
 bottom: 5px;
 color: black;
 background: #a0a0a0;
 padding: 2px;
}

.stationid, .stationid_hidden {
 position: absolute;
 right: 5px;
 top: 5px;
 color: #00ff00;
 font-size: 96px;
}
.stationid { display: block; }
.stationid_hidden { display: none; }

.console, .console_hidden {
 position: absolute;
 right: 10px;
 left: 10px;
 bottom: 10px;
 font-size: 12px;
 color: orange;
 font-family: monospace;
 border-left: 1px solid orange;
 padding: 2px;
 white-space: pre;
 background: black;
 opacity: 0.6;
 z-index: 100;
}
.console { display: block; }
.console_hidden { display: none; }


